<template>
  <el-dialog :title="info.title" :visible.sync="info.isShow">
    <el-form :model="form">
      <el-form-item label="规格名称" :label-width="formLabelWidth">
        <el-input v-model="form.specsname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(item,index) in attrArr"
        :key="index"
        label="规格属性"
        :label-width="formLabelWidth"
      >
        <el-col :span="18">
          <el-input v-model="item.value"></el-input>
        </el-col>
        <el-button v-if="index===0" type="primary" @click="add">新增规格属性</el-button>
        <el-button v-else type="danger" @click="del(index)">删除</el-button>
      </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          active-color="green"
          inactive-color="grey"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="info.isAdd" type="primary" @click="comfirm">确 定</el-button>
      <el-button v-else type="primary" @click="update">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { mapActions } from "vuex";
import { errorAlert } from "../../../utils/alert";
import { mapActions, mapGetters } from "vuex";

export default {
  props: ["info"],
  computed: {
    ...mapGetters({
      form: "specs/form",
      attrArr:"specs/attrArr"
    })
  },
  data() {
    return {
      //   form: {
      //     specsname: "", //商品规格名称
      //     attrs: "", //商品规格属性值
      //     status: 1
      //   },
      formLabelWidth: "120px",
    //   attrArr: [{ value: "" }] //存放所有规格属性
    };
  },
  methods: {
    ...mapActions({
      requestList: "specs/specsListActions",
      totalSpeccs: "specs/totalActions",
      clearform: "specs/clearActions",
      confirmspecs: "specs/confirmActions",
      addspecs: "specs/addActions",
      "onespecs":"specs/oneActions",
      "attrclearActions":"specs/attrclearActions",
      "updatespecs":"specs/updateActions"
    }),
    add() {
      //新增规格属性
      this.attrArr.push({ value: "" });
    },
    del(index) {
      this.attrArr.splice(index, 1);
    },
    cancel() {
      this.info.isShow = false;
      let form = {
        specsname: "", //商品规格名称
        attrs: "", //商品规格属性值
        status: 1
      };
      this.clearform(form);
    //   this.attrArr = [{ value: "" }];
    this.attrclearActions()
    },
    comfirm() {
      if (this.attrArr.every(item => item.value)) {
        //attrs是个字符串  而attrArr是数组,转一下
        // this.form.attrs = this.attrArr.map(item => item.value).join(",");
        let a = this.attrArr.map(item => item.value).join(",");
        this.confirmspecs(a);
      } else {
        errorAlert("规格属性不能为空!");
        return;
      }
      this.addspecs();
      this.cancel();
    },
    getonespecs(id){
        this.onespecs(id)
    },
    update(){
        this.updatespecs()
        this.cancel()
    }
  },
  mounted() {
    this.requestList();
  }
};
</script>

<style>
</style>